<template>
  <div>
    <el-row>
      <el-col :span="18">
        <div>
          <div>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-input v-model="search.roleName" placeholder="输入角色名称搜索"></el-input>
              </el-col>
              <el-col :span="20">
                <el-button type="success" icon="el-icon-search" @click="handlerQuery">搜索</el-button>
                <el-button type="warning" icon="el-icon-refresh-right" @click="resetHandlerQuery">重置</el-button>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <el-button type="primary" icon="el-icon-plus" @click="addCurrentAction">新增</el-button>
          </div>
        </div>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="角色名">
                  <el-input v-model="form.roleName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色别名">
                  <el-input v-model="form.roleAlias"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否使用">
                  <el-switch
                      v-model="form.useFlag"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handlerAddOrModifyRole">确 定</el-button>
              </span>
        </el-dialog>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <div>
            <el-table
                :data="tableData"
                style="width: 100%"
                row-key="deptId"
                highlight-current-row
                @current-change="handleCurrentChange"
                border>
              <el-table-column
                  prop="roleName"
                  label="角色名">
              </el-table-column>
              <el-table-column
                  prop="roleAlias"
                  label="角色别名">
              </el-table-column>
              <el-table-column
                  prop="useFlag"
                  label="是否使用">
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.useFlag"
                      active-color="#13ce66"
                      inactive-color="#ff4949" disabled>
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                  prop="createDateTime"
                  label="创建时间"
                  align="center"
                  sortable
                  width="150">
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="180"
                  align="center"
              >
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle @click="editCurrentAction(scope.row)"
                             size="mini"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                  :current-page="page.pageNum"
                  :page-sizes="page.pageSizes"
                  :page-size="page.pageSize"
                  layout="total, prev, pager, next, sizes"
                  :total="page.total">
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin-top: 120px;padding-left: 20px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单分配</span>
            <el-button style="float: right;" type="primary" icon="el-icon-check" :disabled="roleCheckMenu.checkButton"
                       @click="roleAllocationMenu">保存
            </el-button>
          </div>
          <el-tree :data="menuTree"
                   class="filter-tree"
                   node-key="menuId"
                   :props="menuTreeProps"
                   show-checkbox
                   @node-click="handleNodeClick"
                   ref="tree">
          </el-tree>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "role",
  data() {
    return {
      menuTreeProps: {
        children: 'children',
        label: 'menuName'
      },
      menuTree: [],
      roleCheckMenu: {
        roleId: null,
        checkButton: true
      },
      page: {
        pageSize: 10,
        total: 0,
        pageNum: 1,
        pageSizes: [1, 10, 20, 50, 100]
      },
      search: {
        roleName: null,
        pageNum: null,
        pageSize: null,
        roleId: null
      },
      form: {
        roleId: null,
        roleName: null,
        roleAlias: null,
        useFlag: true,
        remark: null
      },
      dialogVisible: false,
      dialogTitle: '新增角色',
      tableData: []
    }
  },
  created() {
    this.handlerDeptTree();
    this.handlerTable();
  },
  methods: {
    // 初始化部门树
    handlerDeptTree() {
      var param = {
        roleId: this.search.roleId
      };
      this.systemRequest.menuTree(this, param, (res) => {
        console.log(res)
        if (res.data) {
          this.menuTree = res.data;
        }
      })
    },
    // 点击部门树节点事件
    handleNodeClick(data) {
      console.log(data)
    },
    // 管理员列表数据
    handlerTable() {
      this.search.pageSize = this.page.pageSize;
      this.search.pageNum = this.page.pageNum;
      var param = this.search;
      this.systemRequest.getRoles(this, param, (res) => {
        console.log(res)
        if (res.data) {
          this.tableData = res.data.list;
          this.page.total = res.data.total;
        } else {
          this.tableData = [];
        }
      })
    },
    // 表格选择事件
    handleCurrentChange(val) {
      this.roleCheckMenu.roleId = val.roleId;
      this.roleCheckMenu.checkButton = false;
      var param = {
        roleId: val.roleId
      };
      this.systemRequest.roleHasMenuIds(this, param, (res) => {
        console.log(res)
        if (res.data) {
          this.$refs.tree.setCheckedKeys(res.data);
        } else {
          this.$refs.tree.setCheckedKeys([]);
        }
      })
    },
    handlerQuery() {
      this.handlerTable();
    },
    resetHandlerQuery() {
      this.search.roleName = null;
      this.handlerTable();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          }).catch(() => {
      });
    },
    addCurrentAction() {
      this.dialogTitle = '新增角色';
      this.dialogVisible = true;

      this.form.roleId = null;
      this.form.roleName = null;
      this.form.roleAlias = null;
      this.form.useFlag = true;
      this.form.remark = null;
    },
    editCurrentAction(val) {
      this.dialogTitle = '编辑角色';
      this.dialogVisible = true;

      this.form.roleId = val.roleId;
      this.form.roleName = val.roleName;
      this.form.roleAlias = val.roleAlias;
      this.form.useFlag = val.useFlag;
      this.form.remark = val.remark;
    },
    // 角色分配菜单
    roleAllocationMenu() {
      console.log(this.$refs.tree.getCheckedKeys());

      var param = {
        roleId: this.roleCheckMenu.roleId,
        menuIds: this.$refs.tree.getCheckedKeys()
      };
      this.systemRequest.roleCheckMenu(this, param, (res) => {
        this.$message.success("角色分配菜单完毕");

        console.log(res)
        if (res.data) {
          this.roleCheckMenu.checkMenuIds = res.data;
        }
      })
    },
    /**
     * 添加或修改部门
     */
    handlerAddOrModifyRole() {
      var param = this.form;
      if (this.form.roleId) {
        this.systemRequest.modifyRole(this, param, (res) => {
          console.log(res)
          this.dialogVisible = false;
          this.$message.success("角色信息已修改");
          this.handlerTable();
        })
      } else {
        this.systemRequest.addRole(this, param, (res) => {
          console.log(res)
          this.dialogVisible = false;
          this.$message.success("角色已添加");
          this.handlerTable();
        })
      }
    },
    deleteHandleClose(index) {
      this.$refs[`popover-${index}`].doClose()
    },
    // 性别格式化
    sexFormatter(row) {
      if (row.sex) {
        if (row.sex === 0) {
          return '女';
        } else {
          return '男';
        }
      }
    },
    // 页大小发生改变事件
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.handlerTable();
    },
    // 页码发生改变事件
    handlePageChange(val) {
      this.page.pageNum = val;
      this.handlerTable();
    }
  },
}
</script>

<style scoped>

</style>